<template>
  <div class="form-wrap">
    <Breadcrumb
      :titles="title ? [title] : titles"
      :showBack="showBack"
    ></Breadcrumb>
    <div class="step-tab">
      <stepTab
        :type="type"
        :defaultIndex="defaultIndex"
        :items="[
          '基础信息',
          '勘界资料',
          '征前资料',
          '组卷资料'
        ]"
        @changeItem="changeItem"
      ></stepTab>
    </div>
    <div class="table-content" v-loading="!isShow">
      <!-- 前期手续 -->
      <LandInformation
        v-if="currentTab === 0 && isShow"
        :currentTab="currentTab"
        :pkid="pkid"
        :type="type"
        :defaultIndex="defaultIndex"
        ref="land"
      ></LandInformation>
      <!-- 项目设计 -->
      <kanjieData
        v-if="currentTab === 1 && isShow"
        :currentTab="currentTab"
        :pkid="pkid"
        :type="type"
        :defaultIndex="defaultIndex"
        ref="kanjie"
      ></kanjieData>
      <!-- 项目招标 -->
      <collectionBefore
        v-if="currentTab === 2 && isShow"
        :currentTab="currentTab"
        :pkid="pkid"
        :type="type"
        :defaultIndex="defaultIndex"
        ref="collection"
      ></collectionBefore>
      <!-- 项目实施 -->
      <ExamData
        v-if="currentTab === 3 && isShow"
        :currentTab="currentTab"
        :pkid="pkid"
        :type="type"
        :defaultIndex="defaultIndex"
        ref="exam"
      ></ExamData>
    </div>
    <div
      class="bottom_box"
      v-if="
        currentTab == $route.query.defaultIndex &&
        (type == 'edit' || type == 'add')
      "
    >
      <div class="box_left"></div>
      <div class="box_right">
        <!-- <div
          class="sh save"
          @click="saveFileContent()"
        >
          保存
        </div> -->
        <div class="sh" @click="saveFileContent()">
          保存
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb/index'
import stepTab from './stepTab.vue'
import collectionBefore from './collectionBefore.vue'
import ExamData from './ExamData.vue'
import kanjieData from './kanjieData.vue'
import LandInformation from './LandInformation.vue'
import { saveOrUpdate } from '@/api/tudi'
import { kanJieSave } from '@/api/kanjie'
import { collectionSave } from '@/api/zhengqian'
import { examSave } from '@/api/zujuan'
export default {
  name: 'formPage',
  components: {
    stepTab,
    collectionBefore,
    ExamData,
    kanjieData,
    LandInformation,
    Breadcrumb
  },
  props: {
    pkid: String,
    title: String,
    type: { type: String, default: 'edit' },
    defaultIndex: {
      type: [Number, String],
      default: '0'
    },
    showBack: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      items: [
        '基础信息',
        '勘界资料',
        '征前资料',
        '组卷资料'
      ],
      currentTab: '0',
      // type: 'edit',
      // pkid: '',
      titles: [],
      isShow: true
    }
  },
  mounted() {
    this.currentTab = Number(this.defaultIndex)
    this.titles = [this.items[this.currentTab]]
  },
  methods: {
    changeFile(data) {
      //更新提交的数据成某个参数格式
      let result = {}
      if (this.defaultIndex == 0) {
        return data
      } else if (this.defaultIndex == 1) {
        result.fjClVo = {}
        result.fjClVo.landDataClFileVo =
          data.fjClPoList.map((item) => {
            return {
              clId: item.pkid,
              fileIdList: item.landDataClFilePoList.map(
                (item2) => item2.fileId
              )
            }
          })
        result = { ...result, ...data }
        //界址点成果表
        result.jzdcgb = data.jzdcgb?.fileId
        return result
      } else if (this.defaultIndex == 2) {
        result.fjClVo = {}
        result.fjClVo.landDataClFileVo =
          data.fjClPoList.map((item) => {
            return {
              clId: item.pkid,
              fileIdList: item.landDataClFilePoList.map(
                (item2) => item2.fileId
              )
            }
          })
        result = { ...result, ...data }
        return result
      } else if (this.defaultIndex == 3) {
        //申报材料
        result.sbClVo = {}
        result.sbClVo.landDataClFileVo =
          data.sbClPoList.map((item) => {
            return {
              clId: item.pkid,
              fileIdList: item.landDataClFilePoList.map(
                (item2) => item2.fileId
              )
            }
          })
        //审批材料
        result.spClVo = {}
        result.spClVo.landDataClFileVo =
          data.spClPoList.map((item) => {
            return {
              clId: item.pkid,
              fileIdList: item.landDataClFilePoList.map(
                (item2) => item2.fileId
              )
            }
          })
        result.pkid = data.pkid
        result.status = data.status
        result.jsydzdqkmxb = data.jsydzdqkmxb
        return result
      }
    },
    changeItem(item, index) {
      this.currentTab = index
      this.titles = [item]
    },
    async saveFileContent() {
      // saveOrUpdate
      let param = {}
      if (this.currentTab == 0) {
        param = this.changeFile(this.$refs.land.parameter)
        this.$refs.land.$refs.rulesRef.validate(
          (validator) => {
            if (validator) {
              // 处理附件图片
              const fileList = []
              param.fileList.forEach((file) => {
                fileList.push({
                  fileId: file.fileId || file.response.data,
                  pkid: file.pkid,
                  refId: file.refId
                })
              })
              param.fileList = fileList

              // 处理附件材料
              const contractList = []
              const dealList = []
              const keepList = []
              param.landDataManageAttachmentRelList[0].attachmentList.forEach(
                (file) => {
                  contractList.push({
                    refId: file.refId,
                    pkid: file.pkid,
                    fileId:
                      file.fileId || file.response.data
                  })
                }
              )
              param.landDataManageAttachmentRelList[1].attachmentList.forEach(
                (file) => {
                  dealList.push({
                    refId: file.refId,
                    pkid: file.pkid,
                    fileId:
                      file.fileId || file.response.data
                  })
                }
              )
              param.landDataManageAttachmentRelList[2].attachmentList.forEach(
                (file) => {
                  keepList.push({
                    refId: file.refId,
                    pkid: file.pkid,
                    fileId:
                      file.fileId || file.response.data
                  })
                }
              )
              param.contractList = contractList
              param.dealList = dealList
              param.keepList = keepList

              delete param.landDataManageAttachmentRelList
              console.log('param', param)
              this.landSaveOrUpdate(param)
            }
          }
        )
      } else if (this.currentTab == 1) {
        param = this.changeFile(this.$refs.kanjie.parameter)
        this.kanJieSaveForm(param)
      } else if (this.currentTab == 2) {
        param = this.changeFile(
          this.$refs.collection.parameter
        )
        this.collectionBeforeForm(param)
      } else if (this.currentTab == 3) {
        param = this.changeFile(this.$refs.exam.parameter)
        this.examForm(param)
      }
    },
    //土地信息新增或更新
    landSaveOrUpdate(param) {
      saveOrUpdate(param)
        .then((res) => {
          this.$router.back()
          this.$message.success(
            this.pkid ? '编辑成功' : '新增成功'
          )
        })
        .catch((err) => {
          console.log(err)
          this.$message.error(
            this.pkid ? '编辑失败' : '新增失败'
          )
        })
    },
    //勘界编辑
    kanJieSaveForm(param) {
      kanJieSave(param)
        .then((res) => {
          this.$router.back()
          this.$message.success('编辑成功')
        })
        .catch((err) =>
          this.$message.console.error('编辑失败')
        )
    },
    //征前编辑
    collectionBeforeForm(param) {
      collectionSave(param)
        .then((res) => {
          this.$router.back()
          this.$message.success('编辑成功')
        })
        .catch((err) =>
          this.$message.console.error('编辑失败')
        )
    },
    //组卷编辑
    examForm(param) {
      examSave(param)
        .then((res) => {
          this.$router.back()
          this.$message.success('编辑成功')
        })
        .catch((err) =>
          this.$message.console.error('编辑失败')
        )
    }
  }
}
</script>

<style scoped lang="scss">
.form-wrap {
  position: relative;
  width: 100%;
  height: 100% !important;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .table-content {
    flex: 1 1 auto;
    overflow: auto;
  }
  .step-tab {
    width: 100%;
  }
}
.bottom_box {
  width: 100%;
  height: 78px;
  z-index: 1000;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 29px 0 29px;
  display: flex;
  border-top: 1px solid #f1f1f1;
  justify-content: space-between;
  box-sizing: border-box;
  .sh {
    width: 90px;
    height: 32px;
    background: #497fa3;
    border-radius: 2px;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    margin-left: 20px;
  }
  .shenheDisabled {
    cursor: default;
    background: rgb(245, 245, 245);
    color: rgb(176, 176, 176);
  }
  .save {
    background-color: #ffffff;
    border: 1px solid #497fa3;
    color: #497fa3;
  }
  .box_left {
    display: flex;
    justify-content: flex-start;
    .shTime {
      // align-items: center;
      display: flex;
      align-items: center;
      margin-left: 20px;
      .yijian {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 500px;
      }
    }
  }
  .box_right {
    display: flex;
    // justify-content: flex-end;
  }
}
.success {
  color: #00ca6d;
}
.fail {
  color: #f9801c;
}
::v-deep {
  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    // width: 320px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 24px;
    line-height: 24px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 250px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }
    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }
      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    // width: 320px !important;
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }
}
.preview-button {
  background: #497fa3;
  border: 1px solid #497fa3;
  border-radius: 2px;
  color: white;
}
</style>
